<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=1110277
-->
<head>
  <meta charset="utf-8">
  <title>Test for Bug 1110277</title>
  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
  <style>
  .testspan {
    color: yellow;
  }
  .testspan[attributestate],
  .testspan[attributestate]::before, .testspan[attributestate]::after {
    color: blue;
  }

  #firstlinetest::first-line {
    color: purple;
  }
  #firstlinetest > .testspan::before {
    content: "[*]";
  }

  #aftertest > .testspan::after {
    content: "[*]";
  }
  </style>
  <script type="application/javascript">

  /** Test for Bug 1110277 **/

  SimpleTest.waitForExplicitFinish();

  function run() {
    runtest("first line test", "#firstlinetest > .testspan");
    runtest("after test", "#aftertest > .testspan");
    SimpleTest.finish();
  }

  function runtest(description, selector) {
    var utils = SpecialPowers.getDOMWindowUtils(window);
    var span = document.querySelector(selector);
    var cs = getComputedStyle(span, "");

    var startcolor = cs.color;
    var startcount = utils.framesConstructed;
    is(startcolor, "rgb(255, 255, 0)", description + ": initial color");

    span.setAttribute("attributestate", "true");

    var endcolor = cs.color;
    var endcount = utils.framesConstructed;
    is(endcolor, "rgb(0, 0, 255)", description + ": final color");
    is(endcount, startcount,
       description + ": should not do frame construction")
  }

  </script>
</head>
<body onload="run()">
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1110277">Mozilla Bug 1110277</a>
<div id="firstlinetest">
  <span class="testspan">This <span style="display:block">is a</span> test.</span>
</div>
<div id="aftertest">
  <span class="testspan">This <span style="display:block">is a</span> test.</span>
</div>
<pre id="test">
</pre>
</body>
</html>
